<template>
  <div class="auther_table_wrap">
    <el-table
      :data="coupons"
      border
      style="width: 95.2%; margin: 0px auto"
      size="medium"
    >
      <el-table-column prop="id" label="id" width="100"> </el-table-column>
      <el-table-column prop="name" label="优惠券名称"> </el-table-column>
      <el-table-column prop="brief" label="优惠券介绍"> </el-table-column>
      <el-table-column prop="coupon_type_name" label="优惠券类型">
      </el-table-column>
      <el-table-column prop="good_name" label="商品名字"> </el-table-column>
      <el-table-column prop="coupon_num" label="优惠券数量"> </el-table-column>
      <el-table-column prop="start_time" label="开始时间"> </el-table-column>
      <el-table-column prop="over_time" label="结束时间"> </el-table-column>
      <el-table-column
        prop="start_get_time"
        label="开始领卷的时间"
      ></el-table-column>
      <el-table-column
        prop="end_get_time"
        label="领卷结束的时间"
      ></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="fnPopShow(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="fnDelCoupon(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改优惠券" :visible.sync="pop_show" append-to-body>
      <el-form :model="coupon" status-icon label-width="100px">
        <el-form-item label="优惠券名称：" prop="name">
          <el-input
            type="text"
            v-model="coupon.name"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券介绍：" prop="brief">
          <el-input
            type="text"
            v-model="coupon.brief"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品：" prop="good">
          <el-select v-model="coupon.good" size="small">
            <el-option
              v-for="item in sku_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券类型：" prop="coupon_type">
          <el-select v-model="coupon.coupon_type" size="small">
            <el-option
              v-for="item in coupon_type_list"
              :key="item.id"
              :label="item.type_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <div class="block">
          <span class="demonstration">优惠券使用时间：</span>
          <el-date-picker
            v-model="coupon.start_time"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>

        <div class="block">
          <span class="demonstration">优惠券过期时间：</span>
          <el-date-picker
            v-model="coupon.over_time"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>

        <!-- <el-form-item label="优惠券开始时间：" prop="start_time">
          <el-input
            type="text"
            v-model="coupon.start_time"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="优惠券结束时间：" prop="over_time">
          <el-input
            type="text"
            v-model="coupon.over_time"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="优惠券数量：" prop="coupon_num">
          <el-input
            type="text"
            v-model="coupon.coupon_num"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <div class="block">
          <span class="demonstration">开始领取时间：</span>
          <el-date-picker
            v-model="coupon.start_get_time"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>

        
        <div class="block">
          <span class="demonstration">领取结束时间：</span>
          <el-date-picker
            v-model="coupon.end_get_time"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>

        <!-- <el-form-item label="开始时间：" prop="over_time">
          <el-input
            type="text"
            v-model="coupon.start_get_time"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="结束时间：" prop="coupon_num">
          <el-input
            type="text"
            v-model="coupon.end_get_time"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="备注：" prop="remark">
          <el-input
            type="text"
            v-model="coupon.remark"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('coupon')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "CouponTable",
  props: ["coupons"],
  data() {
    return {
      pop_show: false,
      coupon_type_list: [],
      sku_list: [],
      coupon: {
        name: "",
        coupon_type: "",
        brief: "",
        coupon_num: "",
        start_time: "",
        over_time: "",
        good: "",
        start_get_time: "",
        end_get_time: "",
        remark: "",
      },
    };
  },
  methods: {
    // 点击修改触发的方法
    fnPopShow(id) {
      // 显示弹窗
      this.pop_show = true;
      this.edit_id = id;
      this.axios
        .get(cons.apis + "/coupons/coupons/" + this.edit_id + "/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("单个优惠券信息", dat.data);
          this.coupon = dat.data;
          // this.pop_show = true;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    // 修改后提交是触发的方法
    submitForm() {
      // 实例化
      // let form_data = new FormData();
      // // 添加数据
      // form_data.append("name", this.coupon.name);
      // form_data.append("brief", this.coupon.brief);
      // form_data.append("coupon_type", this.coupon.coupon_type);
      // form_data.append("good", this.coupon.good);
      // form_data.append("coupon_num", this.coupon.coupon_num);
      // form_data.append("start_time", this.coupon.start_time);
      // form_data.append("over_time", this.coupon.over_time);
      // form_data.append("start_get_time", this.coupon.start_get_time);
      // form_data.append("end_get_time", this.coupon.end_get_time);
      // form_data.append("remark", this.coupon.remark);
      this.axios
        .put(
          cons.apis + "/coupons/coupons/" + this.edit_id + "/",
          this.coupon,
          {
            headers: {
              Authorization: "JWT " + token,
            },
            responseType: "json",
          }
        )

        .then((dat) => {
          console.log("更新优惠券的响应>>>>>", dat);
          if (dat.status == 200) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.pop_show = false;
            this.$emit("fnResetTable");
          } else {
            this.$message({
              type: "error",
              message: "更新优惠券失败!",
            });
          }
        })
        .catch((err) => {
          if (err.response.status == 400) {
            this.$message({
              type: "info",
              message: err.response.data,
            });
          }
        });
    },
    // 点击删除触发的方法
    fnDelCoupon(id) {
      this.edit_id = id;
      this.$confirm("此操作将删除该优惠券, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .delete(cons.apis + "/coupons/coupons/" + this.edit_id + "/", {
              headers: {
                Authorization: "JWT " + token,
              },
              responseType: "json",
            })
            .then((dat) => {
              console.log("删除的响应>>>>>", dat);
              if (dat.status == 204) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.$emit("fnResetTable");
              }else{
                this.$message({
                type: "error",
                message: "删除失败!",
              });
              }
            })
            .catch((err) => {
              if (err.response.status == 404) {
                this.$message({
                  type: "info",
                  message: "商品未找到！",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 重置
    resetForm() {
      (this.coupon.name = ""),
        (this.coupon.coupon_type = ""),
        (this.coupon.brief = ""),
        (this.coupon.coupon_num = ""),
        (this.coupon.start_time = ""),
        (this.coupon.over_time = ""),
        (this.coupon.good = ""),
        (this.coupon.money_jian = ""),
        (this.coupon.money_zhe = ""),
        (this.coupon.money_man = ""),
        (this.coupon.start_get_time = ""),
        (this.coupon.end_get_time = ""),
        (this.coupon.remark = "");
    },
    // 获取所有商品的列表
    fnGetGoodList() {
      this.axios
        .get(cons.apis + "/goods/skulist/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("skus>>", dat.data);
          this.sku_list = dat.data;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    // 获取所有优惠券类别的列表
    fnGetCouponType() {
      this.axios
        .get(cons.apis + "/coupons/types/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          // console.log("sp, dat.data);
          this.coupon_type_list = dat.data;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
  },
  mounted() {
    // 获取商品的列表
    this.fnGetGoodList();
    // 获取所有的优惠券类型
    this.fnGetCouponType();
  },
};
</script>
<style scoped></style>
